<template>
  <div class="change-password">
    <div class="box">
      <div class="label">密码找回</div>
      <el-form ref="pwdForm" :model="pwdForm" :rules="rules">
        <el-form-item prop="phone" label="手机号：">
          <el-input size="medium" v-model="pwdForm.phone" type="text" auto-complete="off" placeholder="请输入已绑定手机号"
            onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" maxlength="11" class="phone">
          </el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码：" class="code-item">
          <el-input size="medium" v-model="pwdForm.code" type="text" auto-complete="off" placeholder="请输入验证码"
            class="code-input"></el-input>
          <div>
            <el-button v-if="isShow" class="code" type="primary" @click="getCode" :loading="loading"
              size="medium">获取验证码</el-button>
            <el-button v-else type="primary" class="code-btn code-btn0" plain size="medium">{{ count }}s后重试</el-button>
          </div>
        </el-form-item>
        <el-button type="primary" class="change-pwd" @click="handleChangePwd('pwdForm')" size="medium">修改密码</el-button>
      </el-form>
        <!-- <el-form-item prop="phone" label-width="50%" class="pwd-item" label="手机号：">
            <el-input v-model="pwdForm.phone" type="text" style="width: 320px;height: 48px !important;"
              auto-complete="off" placeholder="请输入已绑定手机号"
              onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))" maxlength="11">
              <div class="userbox" slot="prefix">
              <img class="user-icon" src="@/assets/images/tel.png" alt="" />
              <p>手机号</p>
            </div>
            </el-input>
          </el-form-item> -->
        <!-- <el-form-item prop="phone" label-width="50%">
          <el-input
            v-model="pwdForm.phone"
            type="text"
            auto-complete="off"
            placeholder="请输入手机号"
            maxlength="11"
          >
            <div class="userbox" slot="prefix">
              <img class="user-icon" src="@/assets/images/tel.png" alt="" />
              <p>手机号</p>
            </div>
          </el-input>
        </el-form-item> -->
        <!-- <el-form-item prop="code" label-width="50%" class="code-from" label="验证码：">
            <el-input v-model="pwdForm.code" type="text" auto-complete="off" placeholder="请输入验证码" class="code-input"
              style="height:40px !important">
              <div class="userbox" slot="prefix">
              <img class="user-icon" src="@/assets/images/code.png" alt="" />
              <p>验证码</p>
            </div> 
            </el-input><el-button v-if="isShow" class="code" type="primary" @click="getCode"
              :loading="loading">获取验证码</el-button>
            <el-button v-else type="primary" class="code-btn code-btn0" plain>{{ count }}s后重试</el-button>
          </el-form-item> -->
    </div>

  </div>
</template>

<script>
import { getTelcode, getCode, getUsernameOrPhone } from "@/api/login.js";
import { validatephonenumber } from "@/utils/validate.js";
import { Message } from "element-ui";
import _ from "lodash";
export default {
  name: "changePassword",
  data() {
    return {
      loading: false,
      pwdForm: {
        username: "",
        phone: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatephonenumber, trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      count: 59,
      isShow: true,
    };
  },
  methods: {
    //获取验证码
    getCode() {
      if (this.validatePhone()) {
        this.loading = true;
        // 调验证码的接口
        getTelcode(this.pwdForm.phone)
          .then((res) => {
            if (res.code == 3008) {
              Message({
                message: res.message,
                type: "error"
              })
            }
            if (res.code == 200) {
              //验证码倒计时
              this.vaTime();
              this.$message.success(res.message);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    //修改密码
    handleChangePwd(form) {
      // this.$router.push('./success-password')
      this.$refs[form].validate((valid) => {
        if (valid) {
          getCode({
            phone: this.pwdForm.phone,
            code: this.pwdForm.code,
          }).then((res) => {
            if (res.code == 3007) {
              Message({
                message: res.message,
                type: "error",
              });
            } else {
              getUsernameOrPhone({
                userName: this.pwdForm.username,
                phone: this.pwdForm.phone,
              }).then((res) => {
                if (res.success) {
                  this.$router.push({
                    name: "success-password",
                    params: {
                      username: this.pwdForm.username,
                      phone: this.pwdForm.phone,
                      code: this.pwdForm.code,
                    },
                  });
                }
              });
            }
          });
        }
      });
    },
    // 判断手机号是否合法
    validatePhone() {
      if (!this.pwdForm.phone) {
        this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.pwdForm.phone)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      } else {
        return true;
      }
    },
    // 验证码倒计时
    vaTime() {
      this.count = 59;
      this.isShow = false;
      let timer = 0;
      timer = setInterval(() => {
        if (this.count > 0 && this.count <= 59) {
          this.count--;
        } else {
          this.isShow = true;
          clearInterval(timer);
          timer = 0;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.change-password {
  // background-color: #ddd;
  height: 100%;
  // overflow-y: auto;

  .box {
    width: 800px;
    height: 400px;
    border: 1px solid #eee;
    margin:10% auto;
    position: relative;

    .label {
      margin: 76px 0 20px;
      text-align: center;
      font-weight: 500;
      color: #1A2035;
      font-size: 24px;
    }

    .code-item {
      ::v-deep.el-form-item__content {
        margin: 0 240px;
        display: flex;
      }

      .code-input {
        margin-right: 10px;
      }
    }

    .el-form {
      ::v-deep.el-form-item {
        margin-bottom: 20px !important;
      }

      ::v-deep.el-form-item__label {
        width: 240px;
        margin-top: 5px;
      }

      ::v-deep.el-form-item__content {
        margin: 0 240px;
      }
    }
    .change-pwd {
      width: 320px;
      height: 48px;
      margin: 0 240px;
      margin-top: 32px;
    }
  }

  // .pwd {
  //   background-color: #fff;
  //   width: 50%;
  //   margin-left: 25%;
  // }

  // h2 {
  //   font-size: 16px;
  //   text-align: center;
  //   font-weight: 700;
  //   margin-top: 110px;
  //   margin-bottom: 24px;
  // }

  // .el-input {
  //   ::v-deep.el-input--small {
  //     height: 40px !important;

  //     ::v-deep.el-input__inner {
  //       height: 40px !important;
  //     }
  //   }
  // }

  // .pwd-from {
  //   width: 70%;

  //   ::v-deep .el-input--prefix .el-input__inner {
  //     padding-left: 90px !important;
  //   }

  //   h2 {
  //     font-size: 16px;
  //     text-align: center;
  //     font-weight: 700;
  //     margin-top: 110px;
  //     margin-bottom: 24px;
  //   }

  //   .code-from {
  //     ::v-deep.el-form-item__content {
  //       display: flex;

  //       .code-input {
  //         margin-right: 5px;
  //       }
  //     }
  //   }

  //   .pwd-from {

  //     //   width: 70%;
  //     //   .el-input--prefix .el-input__inner {
  //     //     padding-left: 90px !important;
  //     //   }
  //     .pwd-item {
  //       padding-top: 54px;
  //     }

  //     .el-input__prefix {
  //       top: -14px;
  //     }

  //     .userbox {
  //       display: flex;
  //       align-items: center;
  //       color: #000;

  //       img {
  //         margin: 0 7px;
  //       }
  //     }
  //   }

  //   .userbox {
  //     display: flex;
  //     align-items: center;
  //     color: #000;
  //     line-height: 10px;

  //     img {
  //       margin: 0 7px;
  //     }
  //   }

  //   .code {
  //     width: 98px;
  //     height: 48px !important;
  //   }
   
  // }
}</style>